<template>
  <div class="userArticles">
    <div class="select">
      <div class="selected" @click="showSelect">
        <div class="current">{{ currentSelect }}</div>
        <div class="down">
          <van-icon name="arrow-down" size="14" color="#999" />
        </div>
        <div
          v-show="isShowSelect && !overHeader"
          class="pop"
          @click.stop="closeSelect"
        ></div>
        <div v-show="isShowSelect && !overHeader" class="box">
          <div
            v-for="(text, i) in ['默认排序', '热门排序', '最新上传']"
            :key="i"
            @click.stop="select(text)"
            :class="{ selectActive: text == currentSelect }"
          >
            {{ text }}
          </div>
        </div>
      </div>
    </div>
    <div v-if="overHeader" class="fixedSelect">
      <div class="selected" @click="showSelect">
        <div class="current">{{ currentSelect }}</div>
        <div class="down">
          <van-icon name="arrow-down" size="14" color="#999" />
        </div>
        <div v-show="isShowSelect" class="pop" @click.stop="closeSelect"></div>
        <div v-show="isShowSelect" class="box">
          <div
            v-for="(text, i) in ['默认排序', '热门排序', '最新上传']"
            :key="i"
            @click.stop="select(text)"
            :class="{ selectActive: text == currentSelect }"
          >
            {{ text }}
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="likeselect"></div> -->
    <!-- <div class="empty"></div> -->
    <div class="articles" v-if="articles">
      <ArticlesItem
        v-for="article in articles"
        :key="article.resource.id"
        :article="article"
      />
    </div>
    <div class="none" v-else>还没有发布作品</div>
  </div>
</template>

<script>
import ArticlesItem from "@/components/ArticlesItem.vue";

export default {
  components: {
    ArticlesItem,
  },
  props: ["overHeader"],
  data() {
    return {
      currentSelect: "默认排序",
      isShowSelect: false,
      articles: null,
      order: "",
    };
  },
  created() {
    if (this.$route.query.userid != 13525021) {
      this.getArticles();
    }
  },
  methods: {
    showSelect() {
      // console.log("showSelect");
      this.isShowSelect = true;
    },
    closeSelect() {
      // console.log("closeSelect");
      this.isShowSelect = false;
    },
    select(text) {
      this.isShowSelect = false;
      if (this.currentSelect == text) {
        return;
      }
      this.currentSelect = text;
      if (text == "默认排序") {
        this.order = "";
      } else if (text == "热门排序") {
        this.order = "view";
      } else if (text == "最新上传") {
        this.order = "new";
      }
      this.getArticles();
    },
    getArticles() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      this.$axios
        // .get(`https://apis.netstart.cn/xpc/user/${this.$route.query.userid}/articles`)
        .get(
          `https://apis.netstart.cn/xpc/user/${this.$route.query.userid}/articles?type=public&order=${this.order}&is_hide_in_space=0&return_struct_type=user_home&page=1`
        )
        .then((res) => {
          // console.log(res.data.data);
          this.articles = res.data.data.list;
          this.$toast.clear();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.userArticles {
  .select {
    height: 50px;
    // position: absolute;
    // left: 0;
    // top: 425px;
    width: 100%;
    background-color: white;
    border-bottom: 1px solid #f2f2f2;
    box-sizing: border-box;
    display: flex;
    align-items: center;

    .selected {
      display: flex;
      align-items: center;
      // height: 50px;
      margin-left: 15px;
      position: relative;

      .current {
        font-size: 12px;
        color: #999;
        margin-right: 3px;
      }
    }
  }

  .fixedSelect {
    height: 50px;
    position: fixed;
    left: 0;
    top: 100px;
    z-index: 10;
    width: 100%;
    background-color: white;
    border-bottom: 1px solid #f2f2f2;
    box-sizing: border-box;
    display: flex;
    align-items: center;

    .selected {
      display: flex;
      align-items: center;
      // height: 50px;
      margin-left: 15px;
      position: relative;

      .current {
        font-size: 12px;
        color: #999;
        margin-right: 3px;
      }
    }
  }

  .pop {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 11;
    // background-color: rgba(0, 0, 0, 0.5);
  }

  .box {
    position: absolute;
    z-index: 12;
    left: 5px;
    top: 20px;
    display: flex;
    flex-direction: column;
    // align-items: center;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0px 0px 5px -2px black;

    > div {
      width: 90px;
      height: 40px;
      line-height: 40px;
      font-size: 12px;
      text-align: center;
    }

    .selectActive {
      color: red;
    }
  }

  .articles {
    margin-top: 15px;
  }

  .none {
    font-size: 16px;
    color: #999;
    margin-top: 50px;
    text-align: center;
  }
}
</style>
